<template>
  <div>
    <!-- 终端详情 -->

    <el-dialog
      title="终端设备详情"
      :visible.sync="dialogVisible1"
      width="50%"
    >
      <div class="apk-detail-content">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>基础信息</span>
          </div>
          <el-row
            :gutter="20"
            class="form"
          >
            <el-col :span="6">
              <div class="grid-content bg-purple">
                设备序列号：4565615
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                设备品牌型号：华为mate60
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                操作系统：HarmonyOS 4.2.0.128
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                用户admin
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="form"
          >
            <el-col :span="6">
              <div class="grid-content bg-purple">
                手机号码：13000001234
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                状态：在线
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                安装apk数量：29
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                风险apk数量：12
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 下面部分 -->
        <div>
          <el-card class="box-card">
            <div
              slot="header"
              class="clearfix"
            >
              <div style="margin-bottom: 10px;">
                APP列表
              </div>

              <el-table
                :data="tableData2"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  label="APP名称"
                  width="180"
                />
                <el-table-column
                  prop="version"
                  label="版本"
                  width="120"
                />
                <el-table-column
                  prop="releaseTime"
                  label="发布时间"
                  width="180"
                />
                <el-table-column
                  prop="company"
                  label="所属公司"
                  width="180"
                />
                <el-table-column
                  prop="size"
                  label="大小"
                  width="120"
                />
                <el-table-column
                  prop="riskStatus"
                  label="风险情况"
                  width="120"
                />
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialogVisible1 = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData2: [
        {
          name: "抖音",
          version: "1.2.3",
          releaseTime: "2023-04-01",
          company: "北京微播世界科技有限公司",
          size: "131MB",
          riskStatus: "访问和收集个人信息",
        },
        {
          name: "爱奇艺",
          version: "2.2.3",
          releaseTime: "2023-04-01",
          company: "北京微播世界科技有限公司",
          size: "131MB",
          riskStatus: "收集通讯录信息",
        },
        {
          name: "腾讯视频",
          version: "2.12.3",
          releaseTime: "2023-04-01",
          company: "北京微播世界科技有限公司",
          size: "131MB",
          riskStatus: "查看相册",
        },
        {
          name: "酷狗音乐",
          version: "2.2.4",
          releaseTime: "2023-04-01",
          company: "北京微播世界科技有限公司",
          size: "131MB",
          riskStatus: "植入病毒",
        },
        {
          name: "QQ音乐",
          version: "3.12.1",
          releaseTime: "2023-04-01",
          company: "北京微播世界科技有限公司",
          size: "131MB",
          riskStatus: "恶意吸费",
        },
      ],
      activeName: "second",
      dialogVisible1: true,
      // dialogVisible1: false,
    };
  },
};
</script>
<style  scoped>
.form{
  margin-bottom: 20px;
}
</style>